import React, { Component } from 'react';

// import {renderRoutes} from 'react-router-config';
// import { connect } from 'react-redux'
// import { withRouter } from 'react-router-dom'
import { setHomeListData,clearData } from '@/store/action/home'

import ListNavTop from './ListNavTop'
import ListView from '@/components/ListView'
import Item from './ListItem/Item'
import {connect} from 'react-redux'

// import ListItems from './ListItem'
// import Item from './ListItem'


@connect(state => ({ homeListData: state.getIn(['home', 'homeListData']).toJS() }), { setHomeListData,clearData })
// @withRouter

class index extends Component {

  constructor(props) {
    super(props)
    // 在父级定义子组件的数据源
    this.state = {
      navTop: [
        { type: '', name: '推荐' },
        { type: 'basketball', name: '篮球' },
        { type: 'running', name: '跑步' },
        { type: 'fitness', name: '健身' },
        { type: 'freestyle', name: '潮流' }
      ],
      navDown: [
        { channel: '', name: '全部' },
        { channel: 11, name: '单品推荐' },
        { channel: 12, name: '原创精选' },
        { channel: 7, name: '用户晒物' }
      ],
      topActive: { type: '', name: '推荐' },
      downActive: { channel: '', name: '全部' },
      params : {
        type: '',
        channel: '',
        page:1,
        pageSize:20
      }
    }
  }
  changeTop = (text) => {
    console.log("text",text);
    this.setState({
      topActive: text,
      downActive: { channel: null, name: '全部' },
    },()=>{
      this.props.clearData();
      this.props.setHomeListData({
        type: text.type,
        channel: this.state.downActive.channel,
        page:1,
        pageSize:20
      })
    })
  }
  changeDown = (text) => {
    console.log("text2",text);
    this.setState({
      downActive: text
    },()=>{
      this.props.clearData();
      this.props.setHomeListData({
        type: this.state.topActive.type,
        channel_type: text.channel,
        page:1,
        pageSize:20
      })
    })
  }
  
  static getDerivedStateFromProps(nextProps, prevState) {
    let params = {
      type: prevState.topActive.type,
      channel_type: prevState.downActive.channel,
      page:1,
      pageSize:20
    }
    return {params}
  }



  render() {

    // console.log(this.props)
    return (
      <>
        <ListNavTop {...this.state} changeTop={this.changeTop} changeDown={this.changeDown}></ListNavTop>
        {/* <ListItems topActive={this.state.topActive} downActive={this.state.downActive}></ListItems> */}
        <ListView
           item= {Item}
           data= {this.props.homeListData}
           getData= {(page=1) => this.props.setHomeListData(this.state.params)}
        ></ListView>

        {/* ListView */}
        {/* 渲染子路由组件，第二个参数用来向子路由传递参数 */}
        {/* {renderRoutes(this.props.route.routes, {
          item: Item,
          data: this.props.homeListData,
          getData: (page = 1) => this.props.setHomeListData({
            r: this.changeSubRouter(),
            page,
            page_size: 30,
          })
        })} */}
      </>
    );
  }
}

export default index;
